<template>
	<view :style="headerStyle">
		<view class="content">
			<view class="pos">{{weather.info.name}}</view>
			<view class="temp">{{weather.info.main.temp}}°</view>
			<view class="temp_btm">
				{{`${weather.info.weather[0].description}${weather.info.main.temp_min}°/${weather.info.main.temp_max}°风速${weather.info.wind.speed}m/s`}}
			</view>
		</view>
		<view class="air">
			<view class="title">未来五天天气</view>
			<view class="details">
				<view class="item" v-for="(item, index) in Object.keys(weather.wind)" :key="index">
					<span>{{ item }}</span>
					{{ weather.wind[item] }}
				</view>
			</view>
		</view>
		<view class="days" v-if="weather.wind">
			<view :class="index == 0 ? 'active' : 'item'" v-for="(item, index) in weather.info.hours" :key="index">
				<span style="white-space: nowrap;">{{ item.hours }}</span>
				<span class="date">{{ item.win }}</span>
				<image src="../../static/icon/1.png" mode="widthFix"></image>
				<span style="font-weight: 600;">{{ item.tem }}°C</span>
				<span class="wind">{{ item.aqinum }}</span>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入城市" value="" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import { reactive, ref, toRefs, onMounted, computed, onBeforeMount } from 'vue';
// import { appid, appsecret } from '@/utils/base.js';

const API_KEY = 'cba2936a1d96ddea6fe58b13dffe1077'
const appsecret = "dXbMO4B0"

const weather = reactive({
	info: {},
	wind: {},
	city: '获取中'
});
let tipBtn = ref('left:0rpx;');
let barHightTop = ref('100rpx');
let headerStyle = computed(() => {
	return 'height: 100%;overflow: hidden;padding-top:' + barHightTop.value + ';';
});
let inputDialog = ref();
let inputDialogToggle = () => {
	inputDialog.value.open();
};
let dialogInputConfirm = value => {
	inputDialog.value.close();
	searchFunc(value);
};
const searchFunc = bool => {
	if (bool == 0) {
		let city = weather.city.search('市') != -1 ? weather.city.substr(0, weather.city.length - 1) : weather.city;
		getInfo(city);
	} else {
		let city = bool.search('市') != -1 ? bool.substr(0, bool.length - 1) : bool;
		getInfo(bool);
	}
};
let getInfo = city => {
	uni.request({
		url:`https://api.openweathermap.org/data/2.5/weather?lat=${weather.city.latitude.toFixed(2)}&lon=${weather.city.longitude.toFixed(2)}&&lang=zh_cn&units=metric&appid=${API_KEY}`
	}).then(res => {
		console.log(res,'API_KEY');
		if (res.data.errcode == 100) {
			return uni.showToast({
				icon: 'error',
				title: res.data.errmsg
			});
		}
		// weather.city = city;
		const data = res.data;
		weather.info = data;
		// weather.wind = {
		// 	风速: data.win_meter,
		// 	二氧化氮: data.aqi.no2,
		// 	pm25: data.aqi.pm25,
		// 	臭氧: data.aqi.o3,
		// 	湿度: data.humidity,
		// 	pm10: data.aqi.pm10
		// };
	});
};
onMounted(() => {
	console.log(API_KEY,appsecret,'@');
	let systemInfo = uni.getSystemInfoSync();
	console.log(systemInfo,'@');
	var statusBarHeight = systemInfo.statusBarHeight;
	barHightTop.value = statusBarHeight + 'px';
	uni.getLocation({
		type: 'gcj02',
		geocode: true, //设置该参数为true可直接获取经纬度及城市信息
		success: (res)=>{
			uni.showToast({
				title: `获取地址成功`,
			});
			console.log(res,'res');
			weather.city = res;
			console.log();
			getInfo()
		},
		fail: (err)=> {
			uni.showToast({
				title: `获取地址失败`,
			});
			console.log(err);
		}
	});
});
const modeFunc = () => {
	if (tipBtn.value == 'left:0rpx;') {
		tipBtn.value = 'left:100rpx;';
	} else {
		tipBtn.value = 'left:0rpx;';
	}
};
</script>
<style>
page {
	height: 100%;
	overflow: hidden;
}
</style>
<style lang="less">
.bg {
	height: 100%;
	position: absolute;
	background-color: white;
	filter: blur(130rpx);
	z-index: -1;
	.sprite {
		position: absolute;
		width: 700rpx;
		height: 700rpx;
		border-radius: 50%;
	}
	.sp01 {
		top: -80rpx;
		left: -100rpx;
		background-color: #e7fefa;
	}
	.sp02 {
		top: calc(50% - 350rpx);
		right: -100rpx;
		background-color: #feffdb;
		z-index: 1;
	}
	.sp03 {
		bottom: 30rpx;
		background-color: #ddf9ff;
	}
}
.header {
	margin: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.box {
		display: flex;
		align-items: center;
	}
	.more {
		height: 100rpx;
		padding: 0 20rpx;
		border-radius: 30rpx;
		background: linear-gradient(145deg, #ffffff, #e6e6e6);
		box-shadow: 5px 5px 10px #b2d7de, -5px -5px 10px #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9ba7c4;
	}
}
.content {
	position: relative;
	width: 90%;
	height: 380rpx;
	background-color: #0093e9;
	background-image: linear-gradient(315deg, #0093e9 0%, #80d0c7 100%);
	margin: 50rpx auto;
	border-radius: 30rpx;
	box-shadow: 5px 5px 10px #b2d7de, -5px -5px 10px #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #FFF;
	.pos{
		position: absolute;
		top: 10px;
		left: 10px;
	}
	.temp {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.temp {
		color: white;
		padding-top: 70rpx;
		font-size: 150rpx;
		font-weight: 600;
	}
}
.air {
	position: relative;
	width: 90%;
	height: 380rpx;
	background-color: white;
	margin: 50rpx auto;
	border-radius: 30rpx;
	box-shadow: 5px 5px 10px #d3e3e5, -5px -5px 10px #ffffff;
	.title {
		font-size: 40rpx;
		text-align: center;
		padding-top: 20rpx;
		font-weight: 600;
	}
	.details {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
		.item {
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 222rpx;
			span {
				color: #9ba7c4;
				padding-bottom: 14rpx;
			}
		}
	}
}
.days {
	flex-wrap: nowrap;
	overflow: scroll;
	position: relative;
	width: 90%;
	margin: 30rpx auto;
	display: flex;
	.item {
		margin-left: 30rpx;
		padding: 20rpx 15rpx;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 60rpx;
			margin: 12rpx 0;
		}
		.date {
			white-space: nowrap;
			font-size: 28rpx;
			color: rgb(160, 167, 186);
		}
		.wind {
			color: white;
			background-color: rgb(255, 212, 57);
			margin-top: 10rpx;
			font-size: 26rpx;
			padding: 4rpx;
			border-radius: 10rpx;
		}
	}
	.active {
		margin-left: 30rpx;
		color: white;
		padding: 20rpx 15rpx;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #e9b500;
		background-image: linear-gradient(0deg, #0093e9 0%, #96f4e9 100%);
		image {
			width: 60rpx;
			margin: 12rpx 0;
		}
		.date {
			white-space: nowrap;
			font-size: 28rpx;
			color: rgb(237, 239, 247);
		}
		.wind {
			color: white;
			background-color: rgb(255, 212, 57);
			margin-top: 10rpx;
			font-size: 26rpx;
			padding: 4rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
